<template>
	<view class="conter">
		<view class="quit_box">
			<view class="title">
				<view class="">名称</view>
				<view class="">身份</view>
			</view>
			<u-list v-if="guildList.length != 0" height="800rpx" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in guildList" :key="index">
					<!-- list列表 -->
					<view class="list_box">
						<view style="display: flex; align-items: center">
							<view class="header_box">
								<u--image radius="50%" width="91rpx" height="91rpx" :src="imgUrl + item.avatar" alt=""></u--image>
							</view>
							<view class="name_box" style="margin-left: 20rpx">
								<view class="min_box">{{ item.name }}</view>
								<view class="">火力：{{ item.influence }}</view>
							</view>
						</view>
						<view class="name_box">
							{{ item.identity == 1 ? '粉丝' : item.identity == 2 ? '团长' : item.identity == 3 ? '副团长' : item.identity == 4 ? '团饭' : '' }}
						</view>
						<view @click="quitMember(item)" class="ti_box">踢出</view>
					</view>
				</u-list-item>
			</u-list>
			<view  v-if="guildList.length == 0">
				<image style="width: 280rpx; height: 280rpx; margin: 100rpx 200rpx; " src="../../static/images/fighting.gif" mode=""></image>
			</view>
			<!-- list列表 -->
			<u-popup bgColor="#1A1A1A" round="14" :show="showtow" mode="center" @close="closetow">
				<view class="clost_box">
					<view class="titless">您确定劝退该天团成员？</view>
					<view class="butto_box">
						<view @click="showtow = false" class="button">取消</view>
						<view @click="confirmQuitMember" class="button" style="background-color: #eef862; color: #000">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
import { getGuildDetail, getGuildMemberList, setIdEntity, kickOutGuild } from '@/api/union/union.js';
import config from '@/config.js';
export default {
	data() {
		return {
			showtow: false,
			show: false,
			id: '',
			type: '',
			imgUrl: config.gillUrl,
			MyGuildDetail: {},
			show: false,
			onshow: false,
			curPage: 1,
			curPageSize: 20,
			totalSize: 0,
			guildList: [],
			guildId: '',
			memeberId: 0
		};
	},
	onLoad(option) {
		this.guildId = option.guildId;
	},
	created() {
		this.getGuildList();
	},
	methods: {
		closetow() {
			this.showtow = false;
		},
		quitMember(item) {
			this.showtow = true;
			this.memeberId = item.memeberId;
		},
		// 确认劝退
		async confirmQuitMember() {
			let param = {};
			param.guildId = this.guildId;
			param.memeberId = this.memeberId;
			const data = await kickOutGuild(param);
			if (data.code == 200) {
				this.showtow = false;
				this.$modal.showToast('劝退成功');
				this.guildList = [];
				this.getGuildList();
			} else {
				this.showtow = false;
				this.$modal.showToast(data.msg);
			}
		},
		//工会成员列表
		async getGuildList() {
			let param = {};
			param.curPage = this.curPage;
			param.curPageSize = this.curPageSize;
			param.guildId = this.guildId;
			const data = await getGuildMemberList(param);
			let _this = this;
			data.data.pageData.map((i) => {
				_this.guildList.push(i);
			});
			this.totalSize = data.data.totalSize;
		},
		// list加载事件
		scrolltolower() {
			//加载时候判断是否还有下一页
			if (this.guildList.length < this.totalSize) {
				this.curPage++;
				//则还有下一页
				this.getGuildList();
			}
		}
	}
};
</script>

<style scoped lang="less">
page {
	background-color: #1a1a1a;
}

.conter {
	padding: 30rpx 34.88rpx;
	.clost_box {
		width: 602rpx;
		height: 372rpx;
		background: #1a1a1a;
		border-radius: 35rpx;
		border: 3rpx solid #acacac;
		.titless {
			color: #ffffff;
			font-size: 35rpx;
			font-weight: 700;
			margin-top: 109rpx;
			text-align: center;
			font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
		}
		.butto_box {
			display: flex;
			margin-top: 90rpx;
			padding: 0 40rpx;
			justify-content: space-between;
			.button {
				width: 227rpx;
				height: 77rpx;
				color: #ffffff;
				font-size: 31rpx;
				font-weight: 700;
				text-align: center;
				line-height: 80rpx;
				background: #ff5359;
				border-radius: 17rpx;
			}
		}
	}

	.quit_box {
		width: 680rpx;
		height: 952rpx;
		border-radius: 52rpx;
		border: 3rpx solid #2f2f2f;
		background: linear-gradient(180deg, #191919 0%, #282828 100%);

		.title {
			display: flex;
			width: 680rpx;
			height: 115rpx;
			font-weight: 700;
			color: #ffffff;
			padding: 34rpx 270rpx 0 160rpx;
			justify-content: space-between;
		}

		.list_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 22rpx 0 13rpx;
			width: 631rpx;
			height: 115rpx;
			background: #1b1b1b;
			margin-left: 24rpx;
			margin-bottom: 24rpx;
			border-radius: 368rpx;
			border: 2rpx solid #2f2f2f;

			.header_box {
				width: 91rpx;
				height: 91rpx;
				background: #d8d8d8;
				border-radius: 50%;
				border-radius: 44rpx;
			}

			.name_box {
				color: #9e9e9e;
				font-size: 28rpx;
				font-weight: 700;
				font-family: 'font';
				.min_box {
					color: #9e9e9e;
					font-weight: 400;
					font-size: 28rpx;
					font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
				}
			}
			.ti_box {
				width: 136rpx;
				height: 73rpx;
				color: #ffffff;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 700;
				background: #ff5359;
				text-align: center;
				border-radius: 38rpx;
				line-height: 75rpx;
			}
		}
	}
}
</style>
